<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>文本描边</title>
    <style>
      .box {
        width: 100%; /* 设置容器宽度 */
        height: 300px; /* 设置容器高度 */
        position: relative;
        margin: 0 auto;
      }

      .background-image {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-image: url("../assets/img/渐变色.png"); /* 设置背景图路径 */
        background-repeat: no-repeat; /* 禁用背景图重复 */
        background-position: center; /* 背景图居中对齐 */
        transform: rotate(180deg); /* 旋转背景图180度 */
        background-size: cover; /* 背景图铺满容器 */
      }
      .box_text {
        position: absolute;
        top: 45%;
        left: 42%;
        color: black;
        font-size: 50px;
        text-align: center;
        vertical-align: middle;
        /* 
        text-shadow实现: 从六个方向设置文本阴影面积
                  优点: 兼容性好
                  缺点: 1.描边阴影形状不平滑 (因方向只有6个,不全面)
                        2.如果设置color:transparent; 透明   就会展示背后的阴影
             */
        text-shadow: 0 2px #fff, 0 -2px #fff, -2px 2px #fff, -2px 0 #fff,
          2px 0 #fff;
      }
      .box_text2 {
        position: absolute;
        top: 45%;
        left: 42%;
        color: black;
        font-size: 50px;
        text-align: center;
        vertical-align: middle;
        /* 
        -webkit-text-stroke实现:
                  缺点: 兼容性不好
                  优点: 1.描边阴影形状平滑 
                        2.如果设置color:transparent; 透明  没有影响
             */
        -webkit-text-stroke: 2px #fff;
      }
    </style>
  </head>
  <body>
    <div class="box">
      <div class="background-image"></div>
      <span class="box_text"> TEXT STROKE</span>
    </div>
    <div class="box">
      <div class="background-image"></div>
      <span class="box_text2"> TEXT STROKE</span>
    </div>
  </body>
</html>
